<template>
  <div>
    <mt-header class="plain" fixed>
      <mt-button icon="back" slot="left" @click="goBack">返回</mt-button>
      <!-- <mt-button slot="right" @click="goBack">取消</mt-button> -->
    </mt-header>

    <div class="info-container">
      <div class="option-list">
        <div class="option-item" @click="goRegionSelectionPage">
          <mt-cell title="选择地区" class="spec" is-link></mt-cell>
        </div>
      </div>

      <div class="info-list">
        <mt-loadmore ref="loadMore" :auto-fill="false" :top-method="refresh" :bottom-method="loadMore" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded">
          <div class="info-item text-left" v-for="item in data" :key="item.schoolid">
            <div class="item-cover" v-if="item.introimageurl" :style="{height: imgHeight}">
              <img :src="item.introimageurl" alt="">
            </div>
            <div class="item-title color-default" @click="showDetail(item.schoolid)">
              <span class="text">{{item.name}}</span>
              <span class="img" v-for="(x, index) in '01234'" :key="index" v-if="index < (item.rating || 0)">
                <img :src="img.star">
              </span>
            </div>
            <div class="item-desc-title color-dark">学校简介</div>
            <div class="item-desc-content color-dark" v-html="item.descriptionsummary"></div>
          </div>
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
import starImg from '@/assets/images/personal/学校星级.png'

import {
  Toast
} from 'mint-ui'
import {
  Const
} from '@/consts'
import schoolApi from '@/api/school'

import utils from '@/utils'

export default {
  data () {
    return {
      allLoaded: false,
      img: {
        star: starImg
      },
      courseId: '',
      data: [],
      pageNo: 0,
      pageSize: 10
    }
  },

  mounted () {
    this.courseId = this.$route.query.courseId || (utils.get('USER_COURSE') || {}).courseid

    if (this.$route.query.order) {
      utils.save('POSITION', this.$route.query.order, true)
    }

    this.refresh()
  },

  computed: {
    imgHeight () {
      return (window.innerWidth - 32) * 0.557 + 'px'
    }
  },

  methods: {

    refresh () {
      this.data = []
      this.allLoaded = false
      this.pageNo = 0
      this.pageSize = 6
      this.loadMore(true)
      this.$refs.loadMore.onTopLoaded()
      this.pageSize = 5
    },

    loadMore (onlyOnce) {
      schoolApi.getSchoolList({
        params: {
          courseid: this.courseId,
          position: utils.get('POSITION') || '0',
          pageno: this.pageNo++,
          pagesize: this.pageSize
        }
      }).then((resp) => {
        const result = resp[Const.RESP_RESULT] || []

        if (!result || !result[0]) {
          this.allLoaded = true
        } else {
          this.data.push(...result)
        }
        if (!onlyOnce) {
          this.$refs.loadMore.onBottomLoaded()
        }
      }).catch((resp) => {
        if (resp.statusCode === '200') {
          Toast(resp[Const.RESP_MESSAGE] || '获取信息失败')
        }
      })
    },
    handleBottomChange () {
      console.log('一个坑友')
    },
    goRegionSelectionPage () {
      this.$router.push({
        path: '/personal/school/region'
      })
    },

    goBack () {
      this.$router.replace('/personal');
    },

    getSchoolList () {
      schoolApi.getSchoolList({
        params: {
          courseid: this.courseId,
          position: utils.get('POSITION') || '0'
        }
      }).then((resp) => {
        const result = resp[Const.RESP_RESULT] || [];
        this.data = result
      }).catch(resp => {
        if (resp.statusCode == '200') {
          Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
        }
      })
    },

    showDetail (id) {
      this.$router.push({
        path: '/personal/school/detail',
        query: {
          schoolId: id
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$scale: 1.2;
.info-container {
  margin-left: $offset-x;
  margin-right: $offset-x;
  margin-top: 55px;
  .option-list {
    padding-top: 8px;
    border-top: 1px solid #dddddd;
    .option-item {
      height: 48px;
      border-bottom: 1px solid #dddddd;
      font-size: 16px * $scale;
      text-align: left;
      color: #000000;
    }
  }
  .info-list {
    .info-item {
      border-bottom: 1px solid #dddddd;
      padding: 16px 0 18px 0;
      &:last-child {
        border-bottom: none;
      }
      .item-cover {
        width: 100%;
        overflow: hidden;
        border-radius: 5px;
        img {
          width: 100%;
        }
      }
      .item-title {
        font-size: 14px * $scale;
        margin: 18px 0 16px 0;
        .text {
          margin-right: 9px;
        }
        .img {
          margin-left: 3px;
          img {
            width: 12px;
            height: 12px;
          }
        }
      }
      .item-desc-title {
        font-size: 14px * $scale;
        margin-bottom: 9px;
      }
      .item-desc-content {
        font-size: 12px * $scale;
        line-height: 18px;
      }
    }
  }
}
</style>
